<template>
  <div class="ADnotice">
    <el-card class="card">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="user-search">
        <el-button type="success" class="user-btn" @click="addbtn()">添加公告</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="text item" v-loading="loading">
        <el-table
        :data='list'
        stripe
        style="width: 100%"
        height="470"
        >
          <el-table-column
          type="index"
          label=" "
          width="40"
          >
          </el-table-column>
          <el-table-column
          prop="title"
          label="标题"
          width="180"
          >
          </el-table-column>
          <el-table-column
          prop="content"
          label="内容"
          width="400"
          >
          </el-table-column>
          <el-table-column
          prop="author"
          label="作者"
          width="120"
          >
          </el-table-column>
          <el-table-column
          prop="datetime"
          label="时间"
          width="180"
          >
          </el-table-column>
          <el-table-column
          prop="editor"
          label="编辑"
          >
            <template slot-scope="scope">
              <el-button
              size="mini"
              plain
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editor(scope.row)"
              >
              </el-button>
              <el-button
              size="mini"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteOpen(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="Conpager">
        <el-pagination
        class='stu-pager'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        >
       </el-pagination>
      </div>
      <!-- 添加组件 -->
      <el-dialog title="添加公告" :visible.sync="dialogFormVisibleAdd" style=" min-width: 1300px">
        <el-form :model="form" style="margin-right:130px">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-input v-model="form.datetime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="form.author" autocomplete="off"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="addform()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑组件-->
      <el-dialog title="编辑用户" :visible.sync="dialogEditorVisible" style=" min-width: 1300px">
        <el-form :model="editform" style="margin-right:130px">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="editform.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="editform.content" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间" :label-width="formLabelWidth">
            <el-input v-model="editform.datetime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="editform.author" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div  slot="footer" class="dialog-footer">
          <el-button @click="dialogEditorVisible = false">取 消</el-button>
          <el-button type="primary" @click="createdinfo()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ADnotice',
  data () {
    return {
      loading: false,
      value: 'true',
      query: '',
      nowtime: '',
      list: [],
      pageNumber: 1,
      pageSize: 8,
      totalCount: -1,
      role: [],
      id: '',
      dialogFormVisibleAdd: false,
      dialogEditorVisible: false,
      dialogpswVisible: false,
      formLabelWidth: '120px',
      form: {
        author: "",
        content: "",
        datetime:'',
        title: ""
      },
      editform: {
        author: "",
        content: "",
        datetime: '',
        title: "",
        id: ''
      }
    }
  },
  components: {},
  created () {
    this.getNoticelist()
  },
  mounted () {
    this.loading = true
  },
  methods: {
    // 编辑公告信息
    editor (info) {
      this.id = info.id
      this.editform = info
      this.dialogEditorVisible = true
      this.nowtime = new Date().toLocaleString()
    },
    async createdinfo () {
      console.log(this.editform)
      const res = await this.$http.put('notice/update',this.editform)
      console.log(res)
      if (res.data.status === 200) {
        this.$message.success('修改成功！')
        this.dialogEditorVisible = false
        this.getNoticelist()
      } else {
        this.$message.error('error')
      }
    },
    // 添加公告
    addbtn () {
      this.nowtime = new Date().toLocaleString()
      this.form.datetime = this.nowtime
      this.dialogFormVisibleAdd = true
    },
    async addform () {
      console.log(this.form)
      const res = await this.$http.post('notice/add', this.form)
      const {status, msg} = res.data
      console.log(res)
      if (status === 200) {
        this.$message({
          type: 'success',
          message: '添加成功！'
        })
        this.getNoticelist()
        this.form = {}
        this.dialogFormVisibleAdd = false
      } else {
        this.form = {}
        this.$message.error(msg)
      }
    },
    // 获取列表数据
    async getNoticelist () {
      const AUTH_TOKEN = sessionStorage.getItem('adtoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get(`notice/list?pageNow=${this.pageNumber}&pageSize=${this.pageSize}`)
      const {status, msg, data: {records, total}} = res.data
      console.log(res)
      if (status === 200) {
        this.list = records
        this.totalCount = total
        this.loading = false
      } else {
        console.log(msg)
      }
    },
    // 删除公告信息
    deleteOpen (info) {
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const id = info.id
        const res = await this.$http.delete(`notice/delete?id=${id}`)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getNoticelist()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getNoticelist()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      // console.log(`当前页: ${val}`)
      this.getNoticelist()
    }
  }
}
</script>

<style scoped lang="stylus">
.ADnotice,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    text-align right
    width 100%
    .user-btn
      width 100px
      margin-right 50px
  .text
    padding-top 10px
    height 470px
  .Conpager
    margin 0 auto
    padding-top 5px
  .stu-pager
    text-align center
</style>